<template>
  <div>
    <el-card
      shadow="hover"
      style="margin: 0 15px 15px 15px; max-height: 300px; max-width: 390px"
    >
      <div :id="prop.graphId" style="height: 300px; width: 390px"></div>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "PieGraph",
};
</script>

<script lang="ts" setup>
import { defineProps } from "vue";
import * as echarts from "echarts";
import { onMounted } from "@vue/runtime-core";

let prop = defineProps(["data", "title", "graphId"]);

export interface PieData {
  name: string;
  value: number;
}

onMounted(function () {
  let chartDom = document.getElementById(prop.graphId)!;
  let myChart = echarts.init(chartDom);
  let option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: prop.title,
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "40",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: prop.data,
      },
    ],
  };

  setInterval(function () {
    myChart.setOption<echarts.EChartsOption>({
      series: [
        {
          data: prop.data,
        },
      ],
    });
  }, 2000);

  option && myChart.setOption(option);
});
</script>

<style scoped>
</style>